import React, { useState, useEffect } from 'react';
import { Pagination, Modal } from 'antd';
import { useRequest } from 'ahooks';
import InfiniteScroll from 'react-infinite-scroll-component';
import ChartItem from '../ChartItem';
import { getFetch } from '@/utils/doFetch';

function ChatRecord({ curitem }) {
  const [modal, setModal] = useState({
    open: false,
    title: '聊天历史纪录',
    onCancel: () => {
      setModal((s) => ({
        ...s,
        open: false,
      }));
    },
  });

  const [pageIndex, setPageIndex] = useState(1);
  const [data, setData] = useState([]);
  const [total, setTotal] = useState(0);

  const { loading, runAsync } = useRequest(
    async () => {
      if (!curitem?.id) {
        return;
      }
      let res = await getFetch({
        url: '/wbn-api/wechat/employee/chat_message',
        params: {
          company_id: curitem?.id,
          pageIndex,
        },
      });
      setTotal(res?.data?.total);
      return res?.data ?? {};
    },
    {
      refreshDeps: [pageIndex, curitem?.id],
      debounceWait: 400,
      manual: true,
      onSuccess: (res) => {
        const thisresult = res?.list ?? [];
        setData(thisresult);
      },
    },
  );

  return (
    <div>
      <div
        style={{
          height: 60,
          width: 60,
          border: 'none',
          padding: 12,
          borderRadius: 8,
          backgroundColor: '#fff',
          cursor: 'pointer',
        }}
        className="center"
        onClick={async () => {
          await runAsync();
          setModal((s) => ({
            ...s,
            open: true,
          }));
        }}
      >
        <img style={{ width: 32, height: 32 }} src={require('@/assets/chat.svg')} alt="" />
      </div>
      <Modal {...modal} style={{ top: 12 }} footer={false}>
        <Pagination
          size="small"
          total={total}
          current={pageIndex}
          onChange={async (page, pageSize) => {
            setPageIndex(page);
            setTimeout(() => {
              runAsync();
            }, 30);
          }}
          showSizeChanger
          showQuickJumper
        />
        {data?.map((it, i) => {
          return <ChartItem {...it} key={it?.id} setModal={setModal} modal={modal} />;
        })}
      </Modal>
    </div>
  );
}

export default ChatRecord;
